<template>
  <div class="myContainer">
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="领用" name="first">
              <el-row :gutter="10">
                <el-col :span="6">
                  <template>
                    <el-cascader
                      placeholder="全部项目/小区"
                      :options="regionOptions"
                      v-model="regionOptSelected_collar">
                    </el-cascader>
                  </template>
                </el-col>
                <el-col :span="6">
                  <el-date-picker
                    v-model="collar_time"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-col>
                <el-col :span="3">
                  <el-button type="primary" @click="collarSearch">查询</el-button>
                </el-col>
              </el-row>
              <el-row class="myPaddingTop_10px">
                <el-col :span="24">
                  <template>
                    <el-table
                      border
                      :data="list"
                      :stripe = true
                      v-loading="loading"
                      style="width: 100%">
                      <el-table-column
                        label="领用单号"
                        prop="receive_no">
                      </el-table-column>
                      <el-table-column
                        label="领用日期"
                        prop="receive_date">
                        <template scope="scope">
                          <span>{{scope.row.receive_date | getTime}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="领用人"
                        prop="user_name">
                      </el-table-column>
                      <el-table-column
                        label="领用部门"
                        prop="dept_name">
                      </el-table-column>
                      <el-table-column
                        label="领用后存放地址"
                        prop="receive_loc">
                      </el-table-column>
                      <el-table-column
                        label="领用备注"
                        prop="receive_note">
                      </el-table-column>
                      <el-table-column
                        label="资产条码"
                        prop="property_code">
                      </el-table-column>
                      <el-table-column
                        label="资产名称"
                        prop="property_name">
                      </el-table-column>
                      <el-table-column
                        label="规格型号"
                        prop="property_spec">
                      </el-table-column>
                      <el-table-column
                        label="创建人"
                        prop="creator_name">
                      </el-table-column>
                      <el-table-column
                        label="创建时间"
                        prop="create_time">
                      </el-table-column>
                    </el-table>
                  </template>
                </el-col>
              </el-row>
              <div class="block">                    
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page_num"
                  :page-sizes="[10, 15]"
                  :page-size="page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </el-tab-pane>

            <el-tab-pane label="退库" name="second">
              <el-row :gutter="10">
                <el-col :span="6">
                  <template>
                    <el-cascader
                      placeholder="全部项目/小区"
                      :options="regionOptions"
                      v-model="regionOptSelected_retiring">
                    </el-cascader>
                  </template>
                </el-col>
                <el-col :span="6">
                  <el-date-picker
                    v-model="retiring_time"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-col>
                <el-col :span="3">
                  <el-button type="primary" @click="retiringSearch">查询</el-button>
                </el-col>
              </el-row>
              <el-row class="myPaddingTop_10px">
                <el-col :span="24">
                  <template>
                    <el-table
                      border
                      :data="list_r"
                      :stripe = true
                      v-loading="loading_r"
                      style="width: 100%">
                      <el-table-column
                        label="退库单号"
                        prop="receive_no">
                      </el-table-column>
                      <el-table-column
                        label="退库日期"
                        prop="receive_date">
                        <template scope="scope">
                          <span>{{scope.row.receive_date | getTime}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="退库人"
                        prop="user_name">
                      </el-table-column>
                      <el-table-column
                        label="退库部门"
                        prop="dept_name">
                      </el-table-column>
                      <el-table-column
                        label="退库后存放地址"
                        prop="receive_loc">
                      </el-table-column>
                      <el-table-column
                        label="退库备注"
                        prop="receive_note">
                      </el-table-column>
                      <el-table-column
                        label="资产条码"
                        prop="property_code">
                      </el-table-column>
                      <el-table-column
                        label="资产名称"
                        prop="property_name">
                      </el-table-column>
                      <el-table-column
                        label="规格型号"
                        prop="property_spec">
                      </el-table-column>
                      <el-table-column
                        label="创建人"
                        prop="creator_name">
                      </el-table-column>
                      <el-table-column
                        label="创建时间"
                        prop="create_time">
                      </el-table-column>
                    </el-table>
                  </template>
                </el-col>
              </el-row>
              <div class="block">                    
                <el-pagination
                  @size-change="handleSizeChange_ret"
                  @current-change="handleCurrentChange_ret"
                  :current-page="page_num_r"
                  :page-sizes="[10, 15]"
                  :page-size="page_size_r"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total_r">
                </el-pagination>
              </div>
            </el-tab-pane>

          </el-tabs>
        </template>
      </el-col>
    </el-row>
  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
  .RepairDigTab{
    width: 100%;
    border: 1px solid #e6ebf5;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .RepairDigTab tr,.RepairDigTab td{
    border: 1px solid #e6ebf5;
  }
  .RepairDigTab td{
    width: 25%;
    height: 40px;
  }
</style>

<script>
  import { extractAreaIds } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage'; 
  import { receiveAsset } from "@/api/assets";
  export default {
    data(){
      return{
        title:"领用&退库",
        page_num:1,
        page_size:10,
        total:null,
        list:[],
        loading:false,
        regionOptions: [],
        regionOptSelected_collar: [],
        regionOptSelected_retiring: [],
        collar_time:[],
        retiring_time:[],
        
        activeName:"first",
        list_r:[],
        page_num_r:1,
        page_size_r:10,
        total_r:null,
        loading_r:false,
      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected_collar.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      this.regionOptSelected_retiring.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);

      this.ongetReceiveAsset();
    },
    computed: {
      areaIds_collar() {
        return extractAreaIds(this.regionOptSelected_collar, this.regionOptions);
      },
      areaIds_retiring() {
        return extractAreaIds(this.regionOptSelected_retiring, this.regionOptions);
      }
    },
    filters:{
      getTime(val){
        return val?val.split(' ')[0]:'';
      }
    },
    watch: {
      
    },
    methods:{
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetReceiveAsset();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetReceiveAsset();
      },
      handleSizeChange_ret(val) {//每页条数控制
        this.page_size_r = val;
        this.ongetReceiveAsset_retiring();
      },
      handleCurrentChange_ret(val) {//每页
        this.page_num_r = val;
        this.ongetReceiveAsset_retiring();
      },
      collarSearch(){
        this.ongetReceiveAsset();
      },
      retiringSearch(){
        this.ongetReceiveAsset_retiring();
      },
      ongetReceiveAsset(){
        let vm=this;
        let params={
          area_id:vm.areaIds_collar,
          type:1,
          start_time:vm.collar_time?vm.collar_time[0]:'',
          end_time:vm.collar_time?vm.collar_time[1]:'',
          page_num:vm.page_num,
          page_size:vm.page_size
        }
        vm.loading=true;
        receiveAsset(params).then(response =>{
          let res=response.data;
          vm.list=res.rows;
          vm.page_size=res.page_size;
          vm.page_num=vm.page_num;
          vm.total=res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("拉取列表失败！"+error.response.data.error_msg);
        })
      },
      ongetReceiveAsset_retiring(){
        let vm=this;
        let params={
          area_id:vm.areaIds_retiring,
          type:2,
          start_time:vm.retiring_time?vm.retiring_time[0]:'',
          end_time:vm.retiring_time?vm.retiring_time[1]:'',
          page_num:vm.page_num_r,
          page_size:vm.page_size_r
        }
        vm.loading_r=true;
        receiveAsset(params).then(response =>{
          let res=response.data;
          vm.list_r=res.rows;
          vm.page_size_r=res.page_size;
          vm.page_num_r=vm.page_num;
          vm.total_r=res.total;
          vm.loading_r=false;
        }).catch(error => {
          vm.loading_r=false;
          vm.$message.error("拉取列表失败！"+error.response.data.error_msg);
        })
      },
      handleClick(tab, event) {
        if(tab.label=="领用"){
          this.ongetReceiveAsset(); 
        }else if(tab.label=="退库"){
          this.ongetReceiveAsset_retiring();
        }
      }

    }
}
</script>

